<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>task</title>
    <link href="./css/index.css" rel="stylesheet">
    <script src="./js/vue.min.js"></script>
    <script src="./js/vue-resource.min.js"></script>
    <script src="./js/index.js"></script>
    <style>
        #top {
            /*background: #20A0FF;*/
            padding: 5px;
            /*overflow: hidden*/
        }
    </style>

</head>
<body>
<div id="job">
<!--    <div id="top">-->
<!--        <el-button size="small" type="primary" plain @click="search" :loading="loading" icon="el-icon-search">查询-->
<!--        </el-button>-->
<!--        <el-button size="small" type="primary" plain @click="handleadd" icon="el-icon-plus">添加</el-button>-->
<!--    </div>-->
    <br/>
    <div>
        <el-table ref="jobTable" :data="tableData" style="width:100%" border center>
            <el-table-column prop="id" label="任务id" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="taskName" label="任务名称" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="cronExpression" label="表达式" align="center"></el-table-column>
            <el-table-column prop="status" label="任务状态" align="center" :formatter="formatState"></el-table-column>
            <el-table-column prop="nextExecutionTime" label="下次执行时间" sortable align="center"></el-table-column>
            <el-table-column prop="lastExecutionTime" label="最后一次执行时间" sortable align="center"></el-table-column>
            <el-table-column prop="url" label="执行url" align="center"></el-table-column>
            <el-table-column prop="method" label="负责人" align="center"></el-table-column>
            <el-table-column prop="description" label="任务描述" align="center"></el-table-column>
            <el-table-column label="操作" width="300" align="center">
                <template scope="scope">
                    <el-button size="small" type="warning" @click="handlePause(scope.$index, scope.row)">
                        暂停
                    </el-button>
                    <el-button size="small" type="info" @click="handleResume(scope.$index, scope.row)">
                        启用
                    </el-button>
<!--                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">-->
<!--                        删除-->
<!--                    </el-button>-->
<!--                    <el-button size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">-->
<!--                        修改-->
<!--                    </el-button>-->
                    <el-button size="small" type="success" @click="handleRun(scope.$index, scope.row)">
                        运行一次
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div align="center">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </div>
    </div>

    <el-dialog title="添加任务" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="任务名称" label-width="100px" style="width:90%">
                <el-input v-model="form.jobName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="任务分组" label-width="100px" style="width:90%">
                <el-input v-model="form.jobGroup" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="表达式" label-width="100px" style="width:90%">
                <el-input v-model="form.jobCron" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="负责人" label-width="100px" style="width:90%">
                <el-input v-model="form.author" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="报警邮件" label-width="100px" style="width:90%">
                <el-input v-model="form.alarmEmail" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="任务执行url" label-width="100px" style="width:90%">
                <el-input v-model="form.url" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="任务执行方式" label-width="100px" style="width:90%">
                <el-radio-group v-model="form.jobType">
                    <el-radio label="get"></el-radio>
                    <el-radio label="post"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="任务执行参数" label-width="100px" style="width:90%">
                <el-input type="textarea" v-model="form.jobParams"></el-input>
            </el-form-item>

            <el-form-item label="任务描述" label-width="100px" style="width:90%">
                <el-input v-model="form.jobDesc" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="修改任务" :visible.sync="updateFormVisible">
        <el-form :model="updateform">
            <el-form-item label="任务名称" label-width="100px" style="width:90%">
                <el-input v-model="updateform.jobName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="任务分组" label-width="100px" style="width:90%">
                <el-input v-model="updateform.jobGroup" disabled auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="表达式" label-width="100px" style="width:90%">
                <el-input v-model="updateform.jobCron" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="负责人" label-width="100px" style="width:90%">
                <el-input v-model="updateform.author" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="报警邮件" label-width="100px" style="width:90%">
                <el-input v-model="updateform.alarmEmail" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="任务执行url" label-width="100px" style="width:90%">
                <el-input v-model="updateform.url" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="任务执行方式" label-width="100px" style="width:90%">
                <el-radio-group v-model="updateform.jobType">
                    <el-radio label="get"></el-radio>
                    <el-radio label="post"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="任务执行参数" label-width="100px" style="width:90%">
                <el-input type="textarea" v-model="updateform.jobParams"></el-input>
            </el-form-item>

            <el-form-item label="任务描述" label-width="100px" style="width:90%">
                <el-input v-model="updateform.jobDesc" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updateFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
        </div>
    </el-dialog>
</div>

<footer align="center">
    <p>spring定时任务管理</p>
</footer>

<script>
    var vue = new Vue({
        el: "#job",
        data: {
            //表格当前页数据
            tableData: [],
            //请求的URL
            url: 'job',
            //默认每页数据量
            pagesize: 10,
            //当前页码
            currentPage: 1,
            //查询的页码
            start: 1,
            //默认数据总数
            totalCount: 1000,
            //添加对话框默认可见性
            dialogFormVisible: false,
            //修改对话框默认可见性
            updateFormVisible: false,
            //提交的表单
            form: {
                jobName: '',
                jobGroup: '',
                jobCron: '',
                jobDesc: '',
                author: '',
                alarmEmail: '',
                url: '',
                jobType: '',
                jobParams: ''
            },
            updateform: {
                id:'',
                jobName: '',
                jobGroup: '',
                jobCron: '',
                jobDesc: '',
                author: '',
                alarmEmail: '',
                url: '',
                jobType: '',
                jobParams: ''
            },
            loading: false
        },
        methods: {
            // 格式化状态
            formatState: function (row, column, cellValue, index) {
                if (row.jobStatus === 'NORMAL'){
                    return "正常运行";
                }
                if (row.jobStatus === 'ERROR'){
                    return "错误";
                }
                if (row.jobStatus === 'PAUSED'){
                    return "暂停";
                }
                if (row.jobStatus === 'BLOCKED'){
                    return "阻塞";
                }
                if (row.jobStatus === 'COMPLETE'){
                    return "完成";
                }
                 return "未知状态";
            },
            // 从服务器读取数据
            loadData: function (currentPage, pageSize) {
                this.loading = true;
                this.$http.get('/api/tasks/list?' + 'currentPage=' + currentPage + '&pageSize=' + pageSize).then(function (res) {
                    console.log(res);
                    this.tableData = res.data;
                    this.totalCount = 10;
                    this.loading = false;
                }, function () {
                    console.log('failed');
                });
            },
            // 删除任务
            handleDelete: function (index, row) {
                this.$http.delete('/api/tasks/deleteJob', {
                    params: {
                        "id": row.id
                    }
                }, {emulateJSON: true}).then(function (res) {
                    this.loadData(this.currentPage, this.pagesize);
                }, function () {
                    console.log('failed');
                });
            },
            // 暂停任务
            handlePause: function (index, row) {
                this.$http.put('/api/tasks/pause', {
                    "id": row.id
                }, {emulateJSON: true}).then(function (res) {
                    this.loadData(this.currentPage, this.pagesize);
                }, function () {
                    console.log('failed');
                });
            },
            // 启用任务
            handleResume: function (index, row) {
                this.$http.put('/api/tasks/resume', {
                    "id": row.id
                }, {emulateJSON: true}).then(function (res) {
                    this.loadData(this.currentPage, this.pagesize);
                }, function () {
                    console.log('failed');
                });
            },
            // 运行一次
            handleRun: function (index, row) {
                this.$http.put('/api/tasks/runJobNow', {
                    "id": row.id
                }, {emulateJSON: true}).then(function (res) {
                    this.loadData(this.currentPage, this.pagesize);
                }, function () {
                    console.log('failed');
                });
            },
            // 搜索
            search: function () {
                this.loadData(this.currentPage, this.pagesize);
            },
            // 弹出对话框
            handleadd: function () {
                this.dialogFormVisible = true;
            },
            // 添加
            add: function () {
                this.$http.post('/job/addJob', {
                    "jobName": this.form.jobName,
                    "jobGroup": this.form.jobGroup,
                    "jobCron": this.form.jobCron,
                    "jobDesc": this.form.jobDesc,
                    "author": this.form.author,
                    "alarmEmail": this.form.alarmEmail,
                    "url": this.form.url,
                    "jobType": this.form.jobType,
                    "jobParams": this.form.jopParams
                }, {emulateJSON: false}).then(function (res) {
                    this.loadData(this.currentPage, this.pagesize);
                    this.dialogFormVisible = false;
                }, function () {
                    console.log('failed');
                });
            },
            // 更新
            handleUpdate: function (index, row) {
                console.log(row);
                this.updateFormVisible = true;
                this.updateform.id=row.id
                this.updateform.jobName=row.jobName;
                this.updateform.jobGroup=row.jobGroup;
                this.updateform.jobCron=row.jobCron;
                this.updateform.jobDesc=row.jobDesc;
                this.updateform.author=row.author;
                this.updateform.alarmEmail=row.alarmEmail;
                this.updateform.url=row.url;
                this.updateform.jobType=row.jobType;
                this.updateform.jobParams=row.jobParams;
            },
            // 更新任务
            update: function () {
                this.$http.put('/job/updateJob',
                    {
                        "id":this.updateform.id,
                        "jobName": this.updateform.jobName,
                        "jobGroup": this.updateform.jobGroup,
                        "jobCron": this.updateform.jobCron,
                        "jobDesc": this.updateform.jobDesc,
                        "author": this.updateform.author,
                        "alarmEmail": this.updateform.alarmEmail,
                        "url": this.updateform.url,
                        "jobType": this.updateform.jobType,
                        "jobParams": this.updateform.jobParams
                    }, {emulateJSON: false}
                ).then(function (res) {
                    this.loadData(this.currentPage, this.pagesize);
                    this.updateFormVisible = false;
                }, function () {
                    console.log('failed');
                });

            },
            // 每页显示数据量变更
            handleSizeChange: function (val) {
                this.pagesize = val;
                this.loadData(this.currentPage, this.pagesize);
            },
            // 页码变更
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.loadData(this.currentPage, this.pagesize);
            }
        }
    });
    //载入数据
    vue.loadData(vue.currentPage, vue.pagesize);
</script>
</body>
</html>